<template>
  <div class="my-header" :style="{ backgroundColor: background, color: color }">
    {{ title }}
  </div>
</template>

<script>
//2.目标：让header组件支持不同的项目--自定义
//2.1分析哪些可以自定义(背景色、文字颜色、文字内容)
//2.2(新) 可以对props的变量的值 进行校验
// 2.3. 内部使用props变量的值
// 2.4. 外部使用时, 遵守变量名作为属性名, 值的类型遵守
export default {
  props: {
    background: String, // 外部插入此变量的值, 必须是字符串类型, 否则报错
    color: {
      type: String, //约束color值的类型
      default: '#fff', // color变量默认值(外部不给 我color传值, 使用默认值)
    },
    title: {
      type: String,
      require: true, // 必须传入此变量的值
    },
  },
}
</script>

<style lang="less" scoped>
.my-header {
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: #1d7bff;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
</style>
